<template>
  <div class="release">
    <my-header>发布任务</my-header>
    <div class="task">
      <div class="classify">
        <span>任务分类</span>
        <select name id v-model="classify">
          <option value="砍价专区">砍价专区</option>
          <option value="点赞专区">点赞专区</option>
          <option value="下载专区">下载专区</option>
        </select>
      </div>

      <van-field v-model="introduce" label="分类介绍" placeholder="分类介绍，如：拼多多砍价" />

      <van-field v-model="synopsis" label="任务简介" placeholder="请输入任务简介" />

      <van-field v-model="title" label="任务标题" placeholder="请输入任务标题" />

      <van-field v-model="price" label="任务单价(元)" placeholder="请输入任务单价" type="number" />

      <van-field v-model="num" label="任务数量" placeholder="请输入任务总数" type="number" />

      <van-field label="人均次数" placeholder="1" readonly />

      <van-field v-model="totalPrice" label="任务总价(元)" :placeholder="`${total}`" readonly />

      <van-field v-model="link" label="链接信息" placeholder="请输入链接地址" />

      <van-field v-model="steps" label="任务步骤" placeholder="简单易懂的步骤有助于完成任务" />

      <!-- <van-field v-model="message" label="收集信息" placeholder="需要提交的其他信息，如微信名称" /> -->
      <div class="data">
        <span>截至日期</span>
        <input v-model="date" type="date" />
        <input v-model="time" type="time" />
      </div>
      <div class="litu">
        <p>
          <span>审核例图</span>
          <span>最多只能上传1张</span>
        </p>
        <van-uploader :after-read="afterRead" v-model="fileList" multiple :max-count="1" />
      </div>
      <div class="fabu">
        <div>
          <p>
            平台手续费
            <span>{{serviceCharge}}</span>元
          </p>
          <p>
            本次发布需要
            <span>{{all}}</span>元
          </p>
          <button @click="sendList">立即发布</button>
        </div>
      </div>
    </div>
    <div class="up-box"></div>
    <my-footer></my-footer>
    <van-popup v-model="show" duration="1.0">发布成功</van-popup>
  </div>
</template>
<script>
import MyHeader from "../components/MyHeader.vue";
import MyFooter from "../components/MyFooter.vue";
import axios from "axios";
import Vue from "vue";
import { Dialog } from "vant";
import { Toast } from 'vant';

Vue.use(Toast);
import {baseURL} from '../http/require.js'
import {mapState} from 'vuex'

// 全局注册
Vue.use(Dialog);
let formData = null;

export default {
  components: { MyHeader, MyFooter, [Dialog.Component.name]: Dialog.Component },
  watch: {
        user: {
            deep: true,
            immediate: true,
            handler(n,o){
                // console.log({n});
                // if(n.userName =='undefined' || n.userName == undefined){
                //     this.isShow = false
                // }else {
                //     this.isShow = true;
                // }
            }
        }
    },
  data() {
    return {
      classify: "",
      introduce: "",
      synopsis: "",
      title: "",
      price: "",
      num: "",
      totalPrice: "",
      link: "",
      steps: "",
      date: "",
      time: "",
      fileList: [],
      show: false
    };
  },
  methods: {
    
    afterRead(content) {
      let times = new Date();
      // 此时可以自行将文件上传至服务器(承载表单信息的对象)
      formData = new FormData();
      // 提交给服务端的字段
      formData.append("classify", this.classify);
      formData.append("introduce", this.introduce);
      formData.append("synopsis", this.synopsis);
      formData.append("title", this.title);
      formData.append("price", this.price);
      formData.append("num", this.num);
      formData.append("total", this.total);
      formData.append("link", this.link);
      formData.append("step", this.steps);
      formData.append("uid", this.user.id);
      // formData.append("task_id", Math.random().toString().slice(2));

      formData.append(
        "start_data",
        times.getFullYear() +
          "-" +
          (times.getMonth() + 1) +
          "-" +
          times.getDate() +
          "-" +
          times.getHours() +
          ":" +
          times.getMinutes()
      );
      formData.append("end_data", this.date + "-" + this.time);

      formData.append("photo", content.file);
      // formData.append("fileType", "IMAGE");
    },
    sendList() {
      if (
        this.classify.length != 0 &&
        this.introduce.length != 0 &&
        this.synopsis.length != 0 &&
        this.title.length != 0 &&
        this.price.length != 0 &&
        this.num.length != 0 &&
        this.link.length != 0 &&
        this.steps.length != 0 &&
        this.date.length != 0 &&
        this.time.length != 0
      ) {
        Dialog.confirm({
          title: "提示",
          message: `你确定要发布任务吗？你需要支付${this.all}`
        })
          .then( () => {
            axios
              .post(`${baseURL}/task/addTask`, formData, {
                headers: "application/x-www-form-urlencoded"
              })
              .then(response => {
                if (response.data.code == 200) {
                    Toast.success('发布成功');

                  setTimeout(() =>{
                    this.$router.push("/home")
                  }, 1000);

                }
              });
          })
          .catch(() => {
            return;
          });
      }else {
        Dialog.alert({
  message: '请把内容填完整',
}).then(() => {
  return
});
      }
    }
  },
  computed: {
    total: {
      get() {
        return this.price * this.num;
      }
    },
    serviceCharge: {
      get() {
        return this.total * 0.1;
      }
    },
    all: {
      get() {
        return this.total + this.serviceCharge;
      }
    },
  ...mapState(['user'])
  }
};
</script>
<style lang="scss" scoped>
@import "../css/reset.css";
.classify {
  width: 100%;
  height: 30px;
  display: flex;
  line-height: 30px;
  font-size: 14px;
  font-weight: 300;
  padding-left: 15px;
  box-sizing: border-box;
  span {
    flex-basis: 29%;
  }
  select {
    outline: none;
    border: 0;
    background-color: transparent;
  }
}
input[type="text"] {
  color: #000;
}
.data {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  padding-left: 15px;
  box-sizing: border-box;
  span {
    font-size: 14px;
    font-weight: 300;
    color: #000;
    flex-basis: 25%;
  }
  input {
    border: 0;
    outline: none;
    background-color: transparent;
  }
}
.litu {
  width: 100%;
  height: 150px;
  p {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    display: flex;
    span:nth-child(1) {
      flex-basis: 28%;
      font-weight: 300;
    }
    span:nth-child(2) {
      color: #ccc;
    }
  }
}
.fabu {
  width: 100%;
  height: 150px;
  background-color: #ccc;
  padding-top: 30px;
  > div {
    width: 100%;
    height: 100%;
    background-color: #fff;
    p {
      width: 100%;
      padding-left: 15px;
      box-sizing: border-box;
      line-height: 200%;
      color: #666;
      span {
        color: #faca2a;
      }
    }
    button {
      width: 100%;
      height: 60px;
      border: 0;
      background-color: #faca2a;
      margin-top: 5px;
      color: #fff;
      font-size: 22px;
    }
  }
}
.up-box {
  width: 100%;
  height: 60px;
}
</style>
